<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wassup, Hyo!</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
	<link rel="stylesheet" href="/css/mission.css" />
</head>
<body>
	<div data-role="page" data-theme="d">
		<script type="text/javascript" src="/js/kakao.link.js"></script>
		<script type="text/javascript">
		function executeURLLink()
		{
			if($('input[name=kakao_msg]').val()==""){
				alert('메세지입력하셈ㅋ\n뭐어려운일이라고');
				return;
			}
			/*
			msg, url, appid, appname은 실제 서비스에서 사용하는 정보로 업데이트되어야 합니다.
			*/
			kakao.link("talk").send({
				msg : $('input[name=kakao_msg]').val(),
				url : "http://www.hyoppa.com/mission/fc.jsp",
				appid : "www.hyoppa.com",
				appver : "2.0",
				appname : "횹빠야~",
				type : "link"
			});
		}
		</script>
	    <div data-role="header" data-theme="c">
	        <h1>Wassup, Hyo!</h1>
	        <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
	    </div><!-- /header -->
	    <div data-role="content">
	        <div class="article">
	            <p><img src="/images/mission/mission_fc.jpg" alt="fc"></p>
	            <h2>F.C.Barcelona</h2>
	            <p>골이나 빵빵 터져랏</p>
	            <p><small>본격 퍼런니 요구사항 투척 여행</small></p>
	            <p>
		            <label for="basic">메세지 입력 후, KAKAO 버튼 클릭
		            	<a href="javascript:" onclick="executeURLLink();"><img src="/images/mission/btn_kakaotalk_logo_andr.png"></a>
		            </label>
	    			<input type="text" name="kakao_msg" id="basic" value=""  />
	   			<p>
	        </div><!-- /article -->
	    </div><!-- /content -->
	    <div data-role="panel" id="left-panel" data-theme="c">
	        <ul data-role="listview" data-theme="d">
	            <li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
	            <li data-icon="back"><a href="#intro-page" data-rel="back">intro</a></li>
	            <li data-role="list-divider">Menu</li>
	        </ul>
	        <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="d" data-content-theme="d">
	          <h3>To Do</h3>
	          <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="b" data-content-theme="d">
	            <div data-role="collapsible">
	              <h3>할것</h3>
	              <ul data-role="listview">
	                <li><a href="/mission/sky.jsp">어서와</a></li>
	                <li><a href="/mission/hola.jsp">인사</a></li>
	                <li><a href="/mission/me.jsp">생각</a></li>
	                <li><a href="/mission/card.jsp">엽서</a></li>
	                <li><a href="/mission/walk.jsp">걷기</a></li>
	                <li><a href="/mission/healing.jsp">힐링</a></li>
	                <li><a href="/mission/shopping.jsp">쇼핑</a></li>
	              </ul>
	            </div><!-- /collapsible -->
	            <div data-role="collapsible">
	              <h3>먹을것</h3>
	              <ul data-role="listview">
	                <li><a href="/mission/estrella.jsp">에스트렐라</a></li>
					<li><a href="/mission/espresso.jsp">에스프레소</a></li>
					<li><a href="/mission/churros.jsp">츄러스</a></li>
					<li><a href="/mission/jela.jsp">젤라또</a></li>
					<li><a href="/mission/paella.jsp">빠에야</a></li>
					<li><a href="/mission/sangria.jsp">샹그리아</a></li>
					<li><a href="/mission/king.jsp">버거킹</a></li>
	              </ul>
	            </div><!-- /collapsible -->
	            <div data-role="collapsible">
	              <h3>볼것</h3>
	              <ul data-role="listview">
	                <li><a href="/mission/catalonia.jsp">카탈루냐 광장</a></li>
	                <li><a href="/mission/beach.jsp">해변</a></li>
	                <li><a href="/mission/navidad.jsp">펠리스나비닫</a></li>
	                <li><a href="/mission/gaudi.jsp">가우디투어</a></li>
	                <li><a href="/mission/fc.jsp">축구</a></li>
	                <li><a href="/mission/picasso.jsp">피카소</a></li>
	                <li><a href="/mission/flamenco.jsp">플라멩고</a></li>
	              </ul>
	            </div><!-- /collapsible -->
	          </div><!-- /collapsible-set -->
	        </div><!-- /collapsible -->
	    </div><!-- /panel -->
	</div>
</body>
</html>